<template>
  <div class="app-container">
    <div class="h-2 w-100 d-flex">
      <!-- 1号楼东区总控1 2 -->
      <div class="h-100 w-2 p10" v-for="(item,index) in oneCardData" :key="index">
        <div class="h-100 w-100 item_border pl-2 pr-2">
          <div class="height-20 d-flex align-items-center justify-content-between">
            <div class="font-white">
              <div class="d-flex align-items-center">
                <div class="status_point" :class="dataCardBgColor[oneCardStatusData[index].socketColor]"></div>
                <div class="font-14">{{oneCardDataTitle[index]}}</div>
              </div>
            </div>
          </div>
          <div class="height-80 d-flex flex-column flex-wrap">
            <div class="height-33 w-50" v-for="(itemY,indexY) in item.deviceList" :key="indexY"
                 :class="oneCardDataBg[indexY].class">
              <div class="h-100 w-100 d-flex align-items-center pl-2 pr-2" :class="oneCardDataBg[indexY].bgColor">
                <div class="d-flex-center mr-2">
                  <el-image class="img_size_31" :src="oneCardDataBg[indexY].url" fit="cover"></el-image>
                </div>
                <div class="d-flex align-items-end justify-content-center">
                  <div class="content_value font-24 mr-1">{{itemY.deviceValue}}</div>
                  <div class="content_unit font-12">{{oneCardDataBg[indexY].unit}}</div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- 1号楼午休负载 -->
      <div class="h-100 w-2 p10">
        <div class="h-100 w-100 item_border p10">
          <div class="item_title">
            <div class="d-flex align-items-center">
              <div class="success_point"></div>
              <div class="font-14">1号楼午休负载</div>
            </div>
          </div>
          <div class="item_content" id="bar_one"></div>
        </div>
      </div>
      <!-- 1号楼东区总控1 2 -->
      <div class="h-100 w-2 p10" v-for="(item,index) in twoCardData" :key="index">
        <div class="h-100 w-100 item_border pl-2 pr-2">
          <div class="height-20 d-flex align-items-center justify-content-between">
            <div class="font-white">
              <div class="d-flex align-items-center">
                <div class="status_point" :class="dataCardBgColor[twoCardStatusData[index].socketColor]"></div>
                <div class="font-14">{{twoCardDataTitle[index]}}</div>
              </div>
            </div>
          </div>
          <div class="height-80 d-flex flex-column flex-wrap">
            <div class="height-33 w-50" v-for="(itemY,indexY) in item.deviceList" :key="indexY"
                 :class="oneCardDataBg[indexY].class">
              <div class="h-100 w-100 d-flex align-items-center pl-2 pr-2" :class="oneCardDataBg[indexY].bgColor">
                <div class="d-flex-center mr-2">
                  <el-image class="img_size_31" :src="oneCardDataBg[indexY].url" fit="cover"></el-image>
                </div>
                <div class="d-flex align-items-end justify-content-center">
                  <div class="content_value font-24 mr-1">{{itemY.deviceValue}}</div>
                  <div class="content_unit font-12">{{oneCardDataBg[indexY].unit}}</div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- 2号楼午休负载 -->
      <div class="h-100 w-2 p10">
        <div class="h-100 w-100 item_border p10">
          <div class="item_title">
            <div class="d-flex align-items-center">
              <div class="success_point"></div>
              <div class="font-14">2号楼午休负载</div>
            </div>
          </div>
          <div class="item_content" id="bar_two"></div>
        </div>
      </div>
    </div>
    <div class="h-4 w-100 d-flex align-items-start">
      <div class="w-2 h-100 d-flex flex-column justify-content-between">
        <div class="h-50 w-100 p10" v-for="(item,index) in fiveCardData" :key="index">
          <div class="h-100 w-100 item_border pl-2 pr-2">
            <div class="height-20 d-flex align-items-center justify-content-between">
              <div class="font-white">
                <div class="d-flex align-items-center">
                  <div class="status_point" :class="dataCardBgColor[oneCardStatusData[index].socketColor]"></div>
                  <div class="font-14">{{index==0?'1号楼午休区南空调':'1号楼午休区北空调'}}</div>
                </div>
              </div>
              <div class="d-flex-center allControl">
                <div class="mr-1">{{item.deviceList[item.deviceList.length - 1].deviceValue}}</div>
                <div class="font-12">kW·H</div>
              </div>
            </div>
            <div class="height-80 d-flex flex-column flex-wrap">
              <div class="height-33 w-50" v-for="(itemY,indexY) in item.deviceList" :key="indexY"
                   :class="oneCardDataBg[indexY].class">
                <template v-if="indexY<6">
                  <div class="h-100 w-100 d-flex align-items-center pl-2 pr-2" :class="oneCardDataBg[indexY].bgColor">
                    <div class="d-flex-center mr-2">
                      <el-image class="img_size_31" :src="oneCardDataBg[indexY].url" fit="cover"></el-image>
                    </div>
                    <div class="d-flex align-items-end justify-content-center">
                      <div class="content_value font-24 mr-1">{{itemY.deviceValue}}</div>
                      <div class="content_unit font-12">{{oneCardDataBg[indexY].unit}}</div>
                    </div>
                  </div>
                </template>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 1号楼午休区照明 -->
      <div class="h-100 w-2 p10">
        <div class="h-100 w-100 item_border">
          <div class="item_title">
            <div class="d-flex align-items-center pl10">
              <!--              <div class="success_point"></div>-->
              <div class="font-14">1号楼午休区照明</div>
            </div>
          </div>
          <div class="item_content">
            <div class="h-50 w-100 p10" v-for="(item,index) in sixCardData">
              <div class="h-100 w-100 item_border p10">
                <div class="font-white height20">
                  <div class="d-flex align-items-center ">
                    <div class="status_point" :class="dataCardBgColor[sixCardDataStatus[index].socketColor]"></div>
                    <div class="font-14">{{index==0?'南照明':'北照明'}}</div>
                  </div>
                </div>
                <div class="height_calc20 d-flex-center-jb2 pt-2">
                  <div class="height-30 w-100" v-for="(itemY,indexY) in item.deviceList" :key="indexY">
                    <div class="h-100 w-100 d-flex item_bg_color2 borderRadius4 over-hidden">
                      <div class="h-100 width_35 font-white font-44 d-flex-center"
                           :class="cardDataOther[indexY].iconBg">{{cardDataOther[indexY].iconName}}
                      </div>
                      <div class="h-100 width_calc35 d-flex align-items-center pl-3">
                        <div class="font-white-impact text-center font-36 mr-3">
                          {{indexY==0?itemY.deviceValue:$formatNumber2(itemY.deviceValue)}}
                        </div>
                        <div class="font-white font-14 pt-3">{{cardDataOther[indexY].unit}}</div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- 1号楼午休区插座 -->
      <div class="h-100 w-2 p10">
        <div class="h-100 w-100 item_border">
          <div class="item_title">
            <div class="d-flex align-items-center pl10">
              <!--              <div class="success_point"></div>-->
              <div class="font-14">1号楼午休区插座</div>
            </div>
          </div>
          <div class="item_content">
            <div class="h-50 w-100 p10" v-for="(item,index) in sevenCardData">
              <div class="h-100 w-100 item_border p10">
                <div class="font-white height20">
                  <div class="d-flex align-items-center ">
                    <div class="status_point" :class="dataCardBgColor[sevenCardDataStatus[index].socketColor]"></div>
                    <div class="font-14">{{index==0?'插座1':'插座2'}}</div>
                  </div>
                </div>
                <div class="height_calc20 d-flex-center-jb2 pt-2">
                  <div class="height-30 w-100" v-for="(itemY,indexY) in item.deviceList" :key="indexY">
                    <div class="h-100 w-100 d-flex item_bg_color2 borderRadius4 over-hidden">
                      <div class="h-100 width_35 font-white font-44 d-flex-center"
                           :class="cardDataOther[indexY].iconBg">{{cardDataOther[indexY].iconName}}
                      </div>
                      <div class="h-100 width_calc35 d-flex align-items-center pl-3">
                        <div class="font-white-impact text-center font-36 mr-3">
                          {{indexY==0?itemY.deviceValue:$formatNumber2(itemY.deviceValue)}}
                        </div>
                        <div class="font-white font-14 pt-3">{{cardDataOther[indexY].unit}}</div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div class="w-2 h-100 d-flex flex-column justify-content-between">
        <div class="h-50 w-100 p10" v-for="(item,index) in eightCardData" :key="index">
          <div class="h-100 w-100 item_border pl-2 pr-2">
            <div class="height-20 d-flex align-items-center justify-content-between">
              <div class="font-white">
                <div class="d-flex align-items-center">
                  <div class="status_point" :class="dataCardBgColor[eightCardDataStatus[index].socketColor]"></div>
                  <div class="font-14">{{index==0?'2号楼午休区南空调':'2号楼午休区北空调'}}</div>
                </div>
              </div>
              <div class="d-flex-center allControl">
                <div class="mr-1">{{item.deviceList[item.deviceList.length - 1].deviceValue}}</div>
                <div class="font-12">kW·H</div>
              </div>
            </div>
            <div class="height-80 d-flex flex-column flex-wrap">
              <div class="height-33 w-50" v-for="(itemY,indexY) in item.deviceList" :key="indexY"
                   :class="oneCardDataBg[indexY].class">
                <template v-if="indexY<6">
                  <div class="h-100 w-100 d-flex align-items-center pl-2 pr-2" :class="oneCardDataBg[indexY].bgColor">
                    <div class="d-flex-center mr-2">
                      <el-image class="img_size_31" :src="oneCardDataBg[indexY].url" fit="cover"></el-image>
                    </div>
                    <div class="d-flex align-items-end justify-content-center">
                      <div class="content_value font-24 mr-1">{{itemY.deviceValue}}</div>
                      <div class="content_unit font-12">{{oneCardDataBg[indexY].unit}}</div>
                    </div>
                  </div>
                </template>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 1号楼午休区照明 -->
      <div class="h-100 w-2 p10">
        <div class="h-100 w-100 item_border">
          <div class="item_title">
            <div class="d-flex align-items-center pl10">
              <!--              <div class="success_point"></div>-->
              <div class="font-14">2号楼午休区照明</div>
            </div>
          </div>
          <div class="item_content">
            <div class="h-50 w-100 p10" v-for="(item,index) in nineCardData">
              <div class="h-100 w-100 item_border p10">
                <div class="font-white height20">
                  <div class="d-flex align-items-center ">
                    <div class="status_point" :class="dataCardBgColor[nineCardDataStatus[index].socketColor]"></div>
                    <div class="font-14">{{index==0?'南照明':'北照明'}}</div>
                  </div>
                </div>
                <div class="height_calc20 d-flex-center-jb2 pt-2">
                  <div class="height-30 w-100" v-for="(itemY,indexY) in item.deviceList" :key="indexY">
                    <div class="h-100 w-100 d-flex item_bg_color2 borderRadius4 over-hidden">
                      <div class="h-100 width_35 font-white font-44 d-flex-center"
                           :class="cardDataOther[indexY].iconBg">{{cardDataOther[indexY].iconName}}
                      </div>
                      <div class="h-100 width_calc35 d-flex align-items-center pl-3">
                        <div class="font-white-impact text-center font-36 mr-3">
                          {{indexY==0?itemY.deviceValue:$formatNumber2(itemY.deviceValue)}}
                        </div>
                        <div class="font-white font-14 pt-3">{{cardDataOther[indexY].unit}}</div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- 1号楼午休区插座 -->
      <div class="h-100 w-2 p10">
        <div class="h-100 w-100 item_border">
          <div class="item_title">
            <div class="d-flex align-items-center pl10">
              <!--              <div class="success_point"></div>-->
              <div class="font-14">2号楼午休区插座</div>
            </div>
          </div>
          <div class="item_content">
            <div class="h-50 w-100 p10" v-for="(item,index) in tenCardData">
              <div class="h-100 w-100 item_border p10">
                <div class="font-white height20">
                  <div class="d-flex align-items-center ">
                    <div class="status_point" :class="dataCardBgColor[tenCardDataStatus[index].socketColor]"></div>
                    <div class="font-14">{{index==0?'插座1':'插座2'}}</div>
                  </div>
                </div>
                <div class="height_calc20 d-flex-center-jb2 pt-2">
                  <div class="height-30 w-100" v-for="(itemY,indexY) in item.deviceList" :key="indexY">
                    <div class="h-100 w-100 d-flex item_bg_color2 borderRadius4 over-hidden">
                      <div class="h-100 width_35 font-white font-44 d-flex-center"
                           :class="cardDataOther[indexY].iconBg">{{cardDataOther[indexY].iconName}}
                      </div>
                      <div class="h-100 width_calc35 d-flex align-items-center pl-3">
                        <div class="font-white-impact text-center font-36 mr-3">
                          {{indexY==0?itemY.deviceValue:$formatNumber2(itemY.deviceValue)}}
                        </div>
                        <div class="font-white font-14 pt-3">{{cardDataOther[indexY].unit}}</div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import charts from './chart.js'
  import {
    queryOneListWorkingByNum,
    queryOneListWorkingByStatus,
    queryTwoListWorkingByReport,
    queryThreeListWorkingByNum,
    queryThreeListWorkingByStatus,
    queryFourListWorkingByReport,
    queryFiveListWorkingByNum,
    queryFiveListWorkingByStatus,
    querySixListWorkingByNum,
    querySixListWorkingByStatus,
    querySevenListWorkingByNum,
    querySevenListWorkingByStatus,
    queryEightListWorkingByNum,
    queryEightListWorkingByStatus,
    queryNineListWorkingByNum,
    queryNineListWorkingByStatus,
    queryTenListWorkingByNum,
    queryTenListWorkingByStatus,
  } from "@/api/noonBreak/operationMonitor"

  export default {
    components: {},
    data() {
      return {
        timeout: [],

        tempData: [
          {deviceValue: '888.8'},
          {deviceValue: '888.8'},
          {deviceValue: '888.8'},
        ],
        cardDataOther: [
          {iconName: 'C', iconBg: 'item_bg_color3', unit: 'A'},
          {iconName: 'P', iconBg: 'item_bg_color4', unit: 'kW'},
          {iconName: 'E', iconBg: 'item_bg_color5', unit: 'kW·h'},
        ],

        dataCardBgColor: ['item_bg_close', 'item_bg_open', 'item_bg_danger', 'item_bg_blue', 'item_bg_warning', 'bg-index-red', 'bg-index-orange'],

        oneCardData: [],
        oneCardStatusData: [],
        oneCardDataTitle: ['1号楼午休照明+插座总开关', '1号楼午休空调总开关'],
        oneCardDataBg: [
          {url: require('@/assets/img/icon_A.png'), bgColor: 'border-warning-top', unit: 'V', class: 'pt-1 pr-2 pb-2'},
          {url: require('@/assets/img/icon_B.png'), bgColor: 'border-success-top', unit: 'V', class: 'pt-1 pr-2 pb-2'},
          {url: require('@/assets/img/icon_C.png'), bgColor: 'border-danger-top', unit: 'V', class: 'pt-1 pr-2 pb-2'},
          {url: require('@/assets/img/icon_A.png'), bgColor: 'border-warning-top', unit: 'A', class: 'pt-1 pl-2 pb-2'},
          {url: require('@/assets/img/icon_B.png'), bgColor: 'border-success-top', unit: 'A', class: 'pt-1 pl-2 pb-2'},
          {url: require('@/assets/img/icon_C.png'), bgColor: 'border-danger-top', unit: 'A', class: 'pt-1 pl-2 pb-2'},
          {url: require('@/assets/img/icon_C.png'), bgColor: 'border-danger-top', unit: 'A', class: ''},
        ],

        switchStatusOneBgImg: [require('@/assets/img/gz_success.png'), require('@/assets/img/gz_success.png'),
          require('@/assets/img/gz_danger.png'), require('@/assets/img/gz_success.png'),
          require('@/assets/img/gz_warning.png'), require('@/assets/img/gz_danger2.png')],

        twoCardDataTitle: ['2号楼午休插座+照明总开关', '2号楼午休空调总开关'],
        twoCardData: [],
        twoCardStatusData: [],

        oneEchartCardData: {
          xData: [],
          seriesData: [],
        },
        twoEchartCardData: {
          xData: [],
          seriesData: [],
        },
        fiveCardTitle: ['1号楼午休区空调', '1号楼午休区照明', '1号楼午休区插座', '2号楼午休区空调', '2号楼午休区照明', '2号楼午休区插座'],
        fiveCardTitle2: ['南空调', '北空调', '南照明', '北照明', '插座1', '插座2', '南空调', '北空调', '南照明', '北照明', '插座1', '插座2'],
        fiveCardData: [],
        fiveCardDataStatus: [],

        sixCardData: [],
        sixCardDataStatus: [],

        sevenCardData: [],
        sevenCardDataStatus: [],

        eightCardData: [],
        eightCardDataStatus: [],

        nineCardData: [],
        nineCardDataStatus: [],

        tenCardData: [],
        tenCardDataStatus: [],
      }
    },
    created() {

    },
    mounted() {
      this.queryTwoListWorkingByReport()
      this.queryFourListWorkingByReport()

      this.queryOneListWorkingByNum()
      this.queryOneListWorkingByStatus()

      this.queryThreeListWorkingByNum()
      this.queryThreeListWorkingByStatus()

      this.queryFiveListWorkingByNum()
      this.queryFiveListWorkingByStatus()

      this.querySixListWorkingByNum()
      this.querySixListWorkingByStatus()

      this.querySevenListWorkingByNum()
      this.querySevenListWorkingByStatus()

      this.queryEightListWorkingByNum()
      this.queryEightListWorkingByStatus()

      this.queryNineListWorkingByNum()
      this.queryNineListWorkingByStatus()

      this.queryTenListWorkingByNum()
      this.queryTenListWorkingByStatus()

      let _this = this;
      this.timeout[0] = setInterval(() => {
        _this.queryOneListWorkingByNum()
        _this.queryTwoListWorkingByReport()
        _this.queryThreeListWorkingByNum()
        _this.queryFourListWorkingByReport()
        _this.queryFiveListWorkingByNum()
        _this.querySixListWorkingByNum()
        _this.querySevenListWorkingByNum()
        _this.queryEightListWorkingByNum()
        _this.queryNineListWorkingByNum()
        _this.queryTenListWorkingByNum()
      }, 30000);

      this.timeout[1] = setInterval(() => {
        _this.queryOneListWorkingByStatus()
        _this.queryThreeListWorkingByStatus()
        _this.queryFiveListWorkingByStatus()
        _this.querySixListWorkingByStatus()
        _this.querySevenListWorkingByStatus()
        _this.queryEightListWorkingByStatus()
        _this.queryNineListWorkingByStatus()
        _this.queryTenListWorkingByStatus()
      }, 15000);
    },
    beforeDestroy() {
      if (this.timeout.length > 0) {
        this.timeout.forEach(item => {
          clearInterval(item);
        })
      }
    },
    methods: {
      queryOneListWorkingByNum() {
        queryOneListWorkingByNum().then(res => {
          let tempData = res.object
          this.oneCardData = tempData
        })
      },
      queryOneListWorkingByStatus() {
        queryOneListWorkingByStatus().then(res => {
          let tempData = res.object
          this.oneCardStatusData = tempData
        })
      },

      queryTwoListWorkingByReport() {
        queryTwoListWorkingByReport().then(res => {
          let tempData = res.object

          let xData = []
          let seriesData = []
          for (let i = 0; i < tempData.length; i++) {
            xData.push(tempData[i].xValue)
            let obj = {
              value: parseFloat(tempData[i].yValue),
              itemStyle: {
                color: i == 0 ? '#FED52F' : i == 1 ? '#1AA652' : '#26BDE8'
              }
            }
            seriesData.push(obj)
          }

          this.oneEchartCardData.xData = xData
          this.oneEchartCardData.seriesData = seriesData
          charts.barEchart('bar_one', this.oneEchartCardData)
        })
      },

      queryThreeListWorkingByNum() {
        queryThreeListWorkingByNum().then(res => {
          let tempData = res.object
          this.twoCardData = tempData
        })
      },
      queryThreeListWorkingByStatus() {
        queryThreeListWorkingByStatus().then(res => {
          let tempData = res.object
          this.twoCardStatusData = tempData
        })
      },

      queryFourListWorkingByReport() {
        queryFourListWorkingByReport().then(res => {
          let tempData = res.object

          let xData = []
          let seriesData = []
          for (let i = 0; i < tempData.length; i++) {
            xData.push(tempData[i].xValue)
            let obj = {
              value: parseFloat(tempData[i].yValue),
              itemStyle: {
                color: i == 0 ? '#FED52F' : i == 1 ? '#1AA652' : '#26BDE8'
              }
            }
            seriesData.push(obj)
          }

          this.twoEchartCardData.xData = xData
          this.twoEchartCardData.seriesData = seriesData
          charts.barEchart('bar_two', this.twoEchartCardData)
        })
      },

      queryFiveListWorkingByNum() {
        queryFiveListWorkingByNum().then(res => {
          let tempData = res.object || []
          this.fiveCardData = tempData
        })
      },
      queryFiveListWorkingByStatus() {
        queryFiveListWorkingByStatus().then(res => {
          let tempData = res.object
          this.fiveCardDataStatus = tempData
        })
      },

      querySixListWorkingByNum() {
        querySixListWorkingByNum().then(res => {
          let tempData = res.object || []
          this.sixCardData = tempData
        })
      },
      querySixListWorkingByStatus() {
        querySixListWorkingByStatus().then(res => {
          let tempData = res.object
          this.sixCardDataStatus = tempData
        })
      },

      querySevenListWorkingByNum() {
        querySevenListWorkingByNum().then(res => {
          let tempData = res.object || []
          this.sevenCardData = tempData
        })
      },
      querySevenListWorkingByStatus() {
        querySevenListWorkingByStatus().then(res => {
          let tempData = res.object
          this.sevenCardDataStatus = tempData
        })
      },

      queryEightListWorkingByNum() {
        queryEightListWorkingByNum().then(res => {
          let tempData = res.object || []
          this.eightCardData = tempData
        })
      },
      queryEightListWorkingByStatus() {
        queryEightListWorkingByStatus().then(res => {
          let tempData = res.object
          this.eightCardDataStatus = tempData
        })
      },

      queryNineListWorkingByNum() {
        queryNineListWorkingByNum().then(res => {
          let tempData = res.object || []
          this.nineCardData = tempData
        })
      },
      queryNineListWorkingByStatus() {
        queryNineListWorkingByStatus().then(res => {
          let tempData = res.object
          this.nineCardDataStatus = tempData
        })
      },

      queryTenListWorkingByNum() {
        queryTenListWorkingByNum().then(res => {
          let tempData = res.object || []
          this.tenCardData = tempData
        })
      },
      queryTenListWorkingByStatus() {
        queryTenListWorkingByStatus().then(res => {
          let tempData = res.object
          this.tenCardDataStatus = tempData
        })
      },
    }
  }
</script>
<style lang="scss" scoped>
  .height-80 {
    height: 80%;
  }

  .height-33 {
    height: 33.33%;
  }

  .height-30 {
    height: 30%;
  }

  .height-20 {
    height: 20%;
  }


  .border-danger-top {
    background: rgba(3, 24, 29, 0.20);
    border-radius: 4px;
    box-shadow: 0px 2px 15.5px 0px #df547b inset;
  }

  .border-success-top {
    background: rgba(3, 24, 29, 0.20);
    border-radius: 4px;
    box-shadow: 0px 2px 15.5px 0px rgba(7, 193, 96, 0.83) inset;
  }

  .border-warning-top {
    background: rgba(3, 24, 29, 0.20);
    border-radius: 4px;
    box-shadow: 0px 2px 15.5px 0px rgba(254, 213, 47, 0.83) inset;
  }

  .item_bg_color2 {
    background-color: rgba(10, 52, 61, 0.62);
  }

  .item_bg_color3 {
    background-color: #BB8512;
  }

  .item_bg_color4 {
    background-color: #08984D;
  }

  .item_bg_color5 {
    background-color: #289090;
  }

  .width_35 {
    width: 35px;
  }

  .width_calc35 {
    width: calc(100% - 35px);
  }

  .height20 {
    height: 20px;
  }

  .height_calc20 {
    height: calc(100% - 20px);
  }

  .content_value {
    font-family: Impact, Impact-400;
    font-weight: 400;
    color: #ffffff;
  }

  .content_unit {
    font-family: Source Han Sans CN, Source Han Sans CN-500;
    font-weight: 500;
    color: #ffffff;
    padding-bottom: 4px;
  }

  .font-white-impact {
    font-family: Impact, Impact-400;
    font-weight: 500;
    color: #ffffff;
  }

  .font-44 {
    font-size: 44px;
  }

  .font-36 {
    font-size: 36px;
  }

  .img_size_31 {
    width: 31px;
    height: 31px;
  }

  .img_size_29 {
    width: 29px;
    height: 29px;
  }

  .font-white {
    font-family: Source Han Sans CN, Source Han Sans CN-500;
    font-weight: 500;
    color: #ffffff;
  }

  .borderRadius4 {
    border-radius: 4px;
  }

  .pl10 {
    padding: 10px 0 0 10px;
  }

  .status_point {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    margin-right: 8px;
    margin-bottom: 2px;
  }

  .item_bg_open {
    background-color: #1AA652;
  }

  .item_bg_danger {
    background-color: #df547b;
  }

  .item_bg_close {
    background-color: #7A7A7A;
  }

  .item_bg_blue {
    background: #2C637A;
  }

  .item_bg_warning {
    background: #B3A12F;
  }

  .bg-index-red {
    background: #AF1F1F;
  }

  .border_one {
    border: 1px solid rgba(10, 96, 117, 0.62);
    border-radius: 4px;
    box-shadow: 0px 2px 15.5px 0px rgba(102, 237, 246, 0.50) inset;
  }
</style>
